<template>
	<view class="load-more">
		<view v-if="status !== 'none'" class="load-more-text">
			<text v-if="status === 'noMore'" :style="{color:color}">{{ noMoreText }}</text>
			<view v-if="status === 'loading'" :class="iconClass"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "load-more",
		props: {
			status: {
				// 加载中：loading 、 暂无更多：noMore 、 不显示： none
				type: String,
				default: 'none'
			},
			color: {
				type: String,
				default: "#777"
			},
			iconClass: {
				type: String,
				default: "cu-load text-red loading"
			},
			noMoreText: {
				type: String,
				default: "暂无更多"
			}
		},
		data() {
			return {}
		}
	}
</script>

<style>
	.load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}

	.load-more-text {
		font-size: 28upx;
	}
</style>
